<template>
  <el-breadcrumb class="learun-breadcrumb ">
    <el-breadcrumb-item :style="{'max-width':`${100/levelList.length}%` }" v-for="(item,i) in levelList" :key="i">
      <span v-if="i+1>=levelList.length">{{item.name}}</span>
      <a v-else @click="handleClick(item,i)">{{item.name}}</a>
    </el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script>
export default {
    name:'l-breadcrumb',
    props: {
        levelList:{
          type:Array,
          default:()=>[]
        }
    },
    data () {
        return {
        }
    },
    methods:{
      handleClick(item,i){
        const list = this.$deepClone(this.levelList)
        list.length = i + 1
        this.$emit('update:levelList',list)
        this.$emit('change',item)
      }
    }
}
</script>
<style lang="scss">
/*侧边栏*/
.learun-breadcrumb {
    &.el-breadcrumb{
      line-height: inherit !important;
      display: flex;
      align-items: center;
      width: 100%;
      box-sizing: border-box;
    }
    .el-breadcrumb__item{
      display: flex;
      float:inherit;
      align-items: center;
    }
    .el-breadcrumb__inner{
      flex-grow: 1;
      overflow: hidden !important;
      white-space: nowrap !important;
      text-overflow: ellipsis !important;
    }

    .el-breadcrumb__inner, .el-breadcrumb__inner a {
      font-weight: 400 !important;
    }
}
</style>